import React, { Component } from 'react';
import { Breadcrumb, PageHeader, Table, Tag, Space, Pagination } from 'antd'
import axios from '../../http/axios';
import url from '../../config/url'
// 表格的列声明
const columns = [
    {
        title: '用户ID',
        dataIndex: 'id',
        key: 'id',
        // render方法为需要对显示进行二次处理的方法
        // render: text => <a>{text}</a>,
    },
    {
        title: '用户名',
        dataIndex: 'username',
        key: 'username',
    },
    {
        title: '邮箱',
        dataIndex: 'email',
        key: 'email',
    },
    {
        title: '性别',
        dataIndex: 'gender',
        key: 'gender',
        // 性别需要将1，2，3改为男，女，保密
        render: text => {
            switch (text) {
                case "1":
                    return <Tag color="blue">
                        男
                    </Tag>
                case "2":
                    return <Tag color="pink">
                        女
                    </Tag>
                default:
                    return <Tag color="grey">
                        密
                    </Tag>
            }
        }
    },
    {
        title: '手机号',
        dataIndex: 'mobile',
        key: 'mobile',
    },
    {
        title: '状态',
        key: 'status',
        dataIndex: 'status',
        render: status => {
            return status === "1" ? <Tag color="green">
                正常
            </Tag> : <Tag color="red">
                禁用
            </Tag>
        },
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <Space size="middle">
                <a>修改</a>
                <a>删除</a>
            </Space>
        ),
    },
];
class Index extends Component {
    state = {
        page: 1
    }
    render() {
        // 面包屑数据
        const breads = JSON.parse(sessionStorage.getItem("breads"))
        const bread = breads[this.props.location.pathname].split(",")
        return (
            <>
                {/* 面包屑 */}
                <Breadcrumb>
                    {bread.map(el => {
                        return <Breadcrumb.Item key={el}>{el}</Breadcrumb.Item>
                    })}
                </Breadcrumb>
                <PageHeader
                    className="site-page-header"
                    title="用户列表"
                    subTitle="以列表的形式显示用户的信息"
                />
                {/* 表格，记得给加上rowKey，否则控制台报错 */}
                <Table columns={columns} dataSource={this.state.data} pagination={false} rowKey={record => record.id} />
                {/* 分页器 */}
                <div style={{ textAlign: "center", marginTop: "50px" }}>
                    <Pagination defaultCurrent={this.state.page} total={this.state.total} onChange={this.loadData} />
                </div>
            </>
        );
    }
    componentDidMount() {
        this.loadData(this.state.page)
    }5

    // 参数会自动传递，不需要我们传递实参
    loadData = (page, pageSize = 10) => {
        axios.get(url.GetUserList, {
            // axios以对象形式传递get参数的写法
            params: {
                page: page
            }
        }).then(res => {
            if (res.data.errNo === 0) {
                this.setState({
                    // 当前页面的数据
                    data: res.data.paginate.data,
                    // 总的记录数量
                    total: res.data.paginate.total
                })
            }
        })
    }
}

export default Index;
